<script setup>
import { toRef, toRaw, toRefs, reactive } from 'vue';

let man = { name: "a", age: 23 }
// 不会起作用，要求man对象是响应式数据
let name_name = toRef(man, "name")
let man_reactive = reactive({ name: "a", age: 23 })
// 用于参数传递时数据要求
let man_reactive_name = toRef(man_reactive, "name")

let man_reactive_2 = reactive({ name: "a", age: 23 })
let { name:man_reactive_2_name, age:man_reactive_2_age } = toRefs(man_reactive_2)
let man_edit1 = () => {
    man.name = "111"
    console.log("man_edit1", man)
}
let man_edit2 = () => {
    man_reactive_name.value = "111"
    console.log("man_reactive_name", man_reactive_name)
}
let man_edit3 = () => {
    man_reactive_2_name.value = "222"
    man_reactive_2_age.value = 222
    console.log("man_reactive_2", man_reactive_2)
    console.log("man_reactive_2_name", man_reactive_2_name)
    console.log("man_reactive_2_age", man_reactive_2_age)
}
let man_edit4 = () => {
    // toRaw 响应式对象转成原始对象
     /* Proxy {name: 'a', age: 23} */
    console.log("man_edit4", man_reactive_2)  
    /* {name: 'a', age: 23} */
    console.log("man_edit4", toRaw(man_reactive_2))
    /* {name: 'a', age: 23} */
    console.log("man_edit4", man_reactive_2["__v_raw"])
}
</script>
<template>
    <div>
        {{ man }}
        <button @click="man_edit1">修改</button>
        <hr>
        {{ man_reactive }} {{ man_reactive_name }}
        <button @click="man_edit2">修改</button>
        <hr>
        {{ man_reactive_2 }} {{ man_reactive_2_name }}
        <button @click="man_edit3">修改</button>
        <hr>
        <button @click="man_edit4">修改</button>
    </div>
</template>
<style scoped></style>